<template>
    <div class="order container">
        <header>
            <div>
                <i class="iconfont icon-fanhui" @click="$router.back()"></i>
            </div>
            <div>
                <span>提交订单</span>
            </div>
            <div>
                <i class="iconfont icon-home"></i>
            </div>
        </header>
        <section>
            <div class="path">
                <h3 class="path-title">收货信息</h3>
                <div class="path-content" @click="goPath">
                    <div>
                        <span>{{path.name}}</span>
                        <span>{{path.tel}}</span>
                    </div>
                    <div>
                        <span>{{path.province}}</span>
                        <span>{{path.city}}</span>
                        <span>{{path.county}}</span>
                        <span>{{path.addressDetail}}</span>
                    </div>
                </div>
            </div>
            <div class="payment">
                <div class="payment-title">支付方式:</div>
                <van-radio-group v-model="radioPayment">
                    <van-radio name="wx">微信</van-radio>
                    <van-radio name="ali">支付宝</van-radio>
                </van-radio-group>
            </div>
            <div class="goods">
                <ul>
                    <li v-for="(item,index) in goodsList" :key="index">
                        <div>
                            <img :src="item.goods_imgUrl" alt="">
                        </div>
                        <div class="goods-content">
                            <h4>{{item.goods_name}}</h4>
                            <div class="goods-price">
                                <span class="price">￥{{item.goods_price }}</span>
                                <span>x{{item.goods_num}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <footer>
            <!-- <div class="order-total">
                <span>共</span>
                <b>{{total.num}}</b>
                <span>件，</span>
                <span>总金额</span>
                <em>￥{{total.price}}</em>
            </div>
            <div class="order-topay">
                提交订单
            </div> -->
            <van-submit-bar :price="parseInt(total.price.toString()+'00'+'.00')"  button-text="提交订单"  @submit="onSubmit">
                <van-checkbox :value="total.num">共{{total.num}}件</van-checkbox>
            </van-submit-bar>
        </footer>
    </div>  
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
import http from '@/common/api/request';
import { Toast } from 'vant';
import bus from '@/common/bus';
import qs from 'qs';
    export default {
        data(){
            return{
                radioPayment:'wx',
                path:{},
                item:[],
                total:{
                    price:0,
                    num:0
                }
            }
        },
        computed:{
            ...mapState({
                order_id:state=>state.order.order_id,
                selectList:state=>state.cart.selectList
            }),
            ...mapGetters(['defaultPath']),

        },
        created(){  
            this.goodsList = JSON.parse(this.$route.query.goodsList);  
            this.selectAddress();   
        },
        //每次激活时
        activated(){  //activated只有启动keepalive才能出发
            //选定商品的id
            this.item = JSON.parse(this.$route.query.id);
            this.goodsList = JSON.parse(this.$route.query.goodsList);
            bus.$on('selectPath', function(data){
                this.path = JSON.parse(data);
            }.bind(this));
            this.selectOrder();
        },
        methods:{
            ...mapMutations(['initData','initOrder']),
            //查询到地址了
            selectAddress(){
                http.$axios({
                    url:'/api/selectAddress',
                    method:"post",
                    headers:{
                        token:true
                    },
                }).then(res=>{
                    this.initData(res.data);
                    //有默认收货地址
                    if(this.defaultPath.length) {
                        this.path = this.defaultPath[0];
                    }else{
                        this.path = res.data[0];
                    }
                })

            },
            //查询订单
            selectOrder(){
                http.$axios({
                    url:'/api/selectOrder',
                    method:"post",
                    headers:{
                        token:true
                    },
                    data:{
                        order_id:this.order_id
                    }
                }).then(res=>{
                    this.initOrder(res.data);
                    this.total={
                        price : parseInt(res.data[0].goods_price),
                        num : parseInt(res.data[0].goods_num)
                    }
                })
            },
            goPath(){
                this.$router.push({
                    path:'/path',
                    query:{
                        type:'select'
                    }
                });
            },
            onSubmit(){
                if(!this.path) return Toast('请填写收货地址');

                //发送请求==》1.修改订单状态2.删除购物车的数据
                http.$axios({
                    url:'/api/submitOrder',
                    method:"post",
                    headers:{
                        token:true,
                    },
                    data:{
                        order_id:this.order_id,
                        shopArr:this.selectList
                    }
                }).then(res=>{

                    let newArr = []
                    this.goodsList.forEach(v => {
                        newArr.push(v.goods_name);
                    })

                    //支付传递的参数
                    let dataOrder = {
                        orderId:this.order_id,
                        name:newArr.join(''),
                        price:this.total.price
                    }
                    if(res.success){
                        //去支付
                        http.$axios({
                            url:'/api/payment',
                            method:"post",
                            headers:{
                                token:true,
                                'Content-Type':'application/x-www-form-urlencoded'
                            },
                            //qs是增加安全性的序列化
                            data:qs.stringify(dataOrder)
                        }).then(res=>{
                            if(res.success){
                                //打开支付页面
                                window.location.href = res.paymentUrl
                            }
                            console.log(res);
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.1733rem;
    color: #fff;
    background-color: #b0352f;
    i {
        padding: 0 .4rem;
        font-size: .5867rem;
    }
    span {
        font-size: .48rem;
    }
}
section {
    background-color: #f7f7f7;
    .path-title{
        padding: .4rem;
        font-size: .4267rem;
        font-weight: 400;
    }
    .path-content{
        padding: .16rem .4rem;
        background-color: #fff;
        font-size: .3733rem;
        span {
            padding-right: .16rem;
        }
    }
    .payment{
        margin-top: .5333rem;
        padding:.16rem .4rem;
        font-size: .4267rem;
        background-color: #fff;
        .payment-title{
            padding-bottom: .16rem;
        }
        .van-radio-group{
            display: flex;
            justify-content: space-around;
            align-items: center;
            .van-radio{
                padding-right: .2667rem;
            }
        }
    }
    .goods{
        margin-top: .5333rem;
        padding:.16rem .4rem;
        font-size: .4267rem;
        background-color: #fff;
        ul {
            li{
                display: flex;
                margin-bottom: .2667rem;
                img {
                    width: 1.9733rem;
                    height: 1.9733rem;
                }
                .goods-content{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    padding-left: .4rem;
                    .goods-price{
                        display: flex;
                        justify-content: space-between;
                        .price{
                            color: #b0352f;
                        }
                    }
                }
            }
        }
    }
}
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.2rem;
    border-top: 1px solid #ccc;
    .order-total{
        font-size: .3733rem;
        span{
            padding:0 .16rem
        }
        b{
            color: #b0352f;
        }
        em{
            color: #b0352f;
            font-size: .48rem;
        }
    }
    .order-topay{
        width: 3.2rem;
        line-height: 1.2rem;
        color: #fff;
        text-align: center;
        background-color: #b0352f;
        font-size: .4267rem;
    }
}
</style>